<template>
  <!-- 已派工 -->
  <el-main class="vertical">
    <el-container style="height:55%;">
      <basic-crud ref="topCrudRrf" :option="option" apiGetListUrl="mes/specificationTaskController/listDispatchTask"
                  class="curdTop" selectType="multiple" @row-click="handleRowClick">
        <template #firstArticleFlag="{ row }">
          <el-tag type="danger" v-if="row.firstArticleFlag === 'true'">首件</el-tag>
        </template>
        <template #menu="{row}">
          <el-button  icon="cpu" text type="primary"
                      v-permission="'stopDispatching-INSTALLRECORD'" @click="onOpenInstallRecord(row)">安装记录</el-button>
          <el-button  icon="circle-close" text type="primary"
                      v-permission="'stopDispatching-CANCELDISPTCH'" @click="cancelDispatching(row)">取消派工</el-button>
        </template>
        <template #menu-left>
          <el-button
              type="primary" plain
              icon="download"
              :loading="downloadLoading"
              v-permission="'stopDispatching-DOWNLOADCARD'"
              @click="downloadProcessCard()"
          >下载工卡</el-button>
        </template>
      </basic-crud>
    </el-container>

    <!-- 工序详情页面组件 -->
    <techne-deails style="height:45%" ref="technoDeailsRef" :hidden-btn="true" :hidden-form="true"
                   :must-show-menu="true" :autoLoad="false"></techne-deails>
  </el-main>
</template>

<script setup>
import {ref} from "vue";
import {downloadCard} from "@/utils/file.js";
import TechneDeails from "@/views/mes/techne/TechneDeails.vue";
import {ElMessage} from "element-plus";

const bottomHeight = ref((document.body.clientHeight - 120) * 0.45 - 75);//0.45是父容器的高度设为45%

const option = ref({
  highlightCurrentRow: true,
  calcHeight: bottomHeight.value + 90,
  statusBtn: true,
  multiple: true,
  addBtn: false,
  menu: false,
  column: [
    {
      label: "状态",
      prop: "status",
      width: 80,
      slot: true,
      search: true,
      searchType: "select",
      sortable:true,
      searchSpan:4,
      virtualize: true,
      statusShow: true,
      statusTag:true,
      statusTypeMap: {
        Suspended: 'danger',
        Obsoleted: 'info',
        Finish: 'success',
      }
    },
    {
      label: "计划编号",
      prop: "sourceCode",
      minWidth: 220,
      search:true,
      overHidden: true,
    },
    {
      label: "项目号",
      prop: "workOrderCode",
      search: true,
      sortable:true,
      searchSpan:4,
      minWidth: 150,
    },
    {
      label: "产品型号",
      prop: "modelName",
      search: true,
      sortable:true,
      searchSpan:4,
      overHidden: true,
      minWidth: 150,
    },
    {
      label: "产品编号",
      prop: "pdmProductCode",
      search: true,
      sortable:true,
      searchSpan:4,
      minWidth: 150,
    },
    {
      label: "产品名称",
      prop: "pdmProductName",
      sortable: true,
      overHidden: true,
      searchSpan:4,
      minWidth: 150,
    },
    {
      label: "首件标识",
      prop: "firstArticleFlag",
      width: 80,
      slot: true,
    },
    {
      label: "规程编号",
      prop: "code",
      search: true,
      searchSpan:4,
      sortable:true,
      width: 150,
    },
    {
      label: "规程名称",
      prop: "name",
      sortable:true,
      width: 150,
    },
    {
      label: "版本",
      prop: "specificationRev",
      sortable:true,
      width: 70,
    },
    {
      label: "产品主管",
      prop: "assignerName",
      sortable:true,
      hide:true,
      width: 100,
    },
    {
      label: "计划开始日期",
      prop: "needStartDate",
      width: 120,
      sortable:true,
      formatter: (row) => {
        return formatDate(row.needStartDate, "yyyy-MM-dd");
      },
    },
    {
      label: "计划结束日期",
      prop: "needEndDate",
      sortable:true,
      width: 120,
      formatter: (row) => {
        return formatDate(row.needEndDate, "yyyy-MM-dd");
      },
    },
    {
      label:'关重件',
      prop: 'importantSign',
      display: false,
      width: 80,
      sortable: true,
      type: 'select',
      search: true,
      searchSpan:4,
      searchType: 'select',
      dicData: [{
        label:'关键件',
        value: '1'
      },{
        label: '重要件',
        value: '2'
      },{
        label: '普通件',
        value: '3'
      }]
    }, {
      label:'数量',
      prop: 'quantity',
      width:70,
    },{
      label:'批次号',
      prop: 'batchNum',
      width: 180,
      overHidden: true
    },{
      label: '配套机型',
      prop: 'applyProduct',
      width: 130
    },
    {
      label: "紧急程度",
      prop: "exigencyLevel",
      display: false,
      width: 90,
      type: "select",
      dicData: [
        {
          label: "不紧急",
          value: "none",
        },
        {
          label: "一般",
          value: "normal",
        },
        {
          label: "紧急",
          value: "exigency",
        },
        {
          label: "非常紧急",
          value: "veryExigency",
        },
      ],
      formatter: (val) => {
        return val.exigencyLevelText;
      },
    },
    {
      label: "军检",
      prop: "armyCheck",
      display: false,
      width: 70,
      type: "switch",
      dicData: [{
        label:'否',
        value:'false'
      },{
        label: '是',
        value:'true'
      }]
    },
    {
      label: "开工日期",
      prop: "beginDate",
      width: 120,
      formatter: (row) => {
        return formatDate(row.beginDate, "yyyy-MM-dd");
      },
    },
    {
      label: "完工日期",
      prop: "finishDate",
      width: 120,
      formatter: (row) => {
        return formatDate(row.finishDate, "yyyy-MM-dd");
      },
    },
    {
      label: "终止日期",
      prop: "stopDate",
      width: 120,
      formatter: (row) => {
        return formatDate(row.stopDate, "yyyy-MM-dd");
      },
    },
    {
      label: "终止说明",
      prop: "stopReason",
      width: 200,
    },
  ]
});

const topCrudRrf = ref(null);

const technoDeailsRef=ref(null)
const handleRowClick=(row) =>{
  technoDeailsRef.value?.loadOnlyBySpecTask(row, 'worker');
}

// 查看安装记录
const onOpenInstallRecord=(row)=> {
  //this.$refs.installRecordRef.openDialog(row);
}

//下载工卡
const downloadLoading = ref(false);
const downloadProcessCard = async () => {
  if (topCrudRrf.value.selectData.length <= 0) {
    return ElMessage.warning('至少选择一条数据！')
  }
  ElMessageBox.confirm("是否确认下载工卡吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    downloadLoading.value=true;
    let taskIds = topCrudRrf.value.selectData.map((item) => {
      return item.id;
    });
    downloadCard({ specificationTaskIds: taskIds.join(",") }, downloadLoading);
  });
}
</script>

<style scoped>

</style>